<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>留存数据</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="shortcut icon" href="favicon.ico">
	<link href="__STATIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<!-- jqgrid-->
	<link href="__STATIC__/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="__STATIC__/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/css/tool.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox ">
				<div class="ibox-title">
					<h5>留存数据</h5>
				</div>
				<div class="toogl_body">
					<div class="toogl_tale">
						<!-- <a href="__ROOT__/index.php/Administration/Statistics/Stati_xzcl"><input type="button" value="新增用户数据" class="btn btn-w-m btn-default"></a> -->
						<a href="__ROOT__/index.php/Administration/Statistics/Stati_xzcl_1"><input type="button" value="留存数据" class="btn btn-w-m btn-info"></a>

					</div>
					<div class="ibox-content ibox-conte5">
						<form id="form_1" class="form-inline">
							<div class="form-group form-group-wj mmp-csl">
								<label class="test-item col-sm-2 control-dy">选择时间：</label>
								<input id="test1" class="form-control form-con-ban">
								<label class="test-item">-</label>
								<input id="test2" class="form-control form-con-ban">　
								<input type="button" value="查询" class="btn btn-info" onclick="_inquireClick()">
							</div>
						</form>
					</div>
					<div class="jqGrid_wrapper">
						<table id="table_list_1"></table>
						<div id="pager_list_1"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--手机导航-->
<div class="to-fdh" style="display: none;">
	<img class="to-imgd" src="__STATIC__/img/phonedh.jpg">
	<div class="mob-nrlb">
		<ul>
			<li>
				<a class="mob-nrdh">管理</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('Player/gameplayer')}">玩家管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('system/notice')}">公告管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('email/mail')}">邮件管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Club/club')}">亲友圈管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Money/money')}">提现管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Order/order')}">订单管理</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh">数据</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('data/datagk')}">概況</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datawf')}">玩法</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datalc')}">留存</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datass')}">实时数据</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataczfx')}">充值分析</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataclub')}">亲友圈统计</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/president')}">高级会长</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/regionaldata')}">地区数据</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh mob-qbh">权限</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_list')}">权限管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_group')}">用户组管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('account/account_details')}">后台账号管理</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<div id="zkbg">
	<img src="__STATIC__/img/dp.gif">
</div>
<div class="vnl-zz" style="display:none">
	<div><img src="__STATIC__/img/bqhp.gif"></div>
</div>
<!--手机适配-->
<script src="__STATIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__STATIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__STATIC__/js/plugins/peity/jquery.peity.min.js"></script>
<script src="__STATIC__/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__STATIC__/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
<script src="__STATIC__/js/content.js?v=1.0.0"></script>
<script src="__STATIC__/js/plugins/laydate/laydate.js"></script>
<script src="__STATIC__/js/echarts.min.js"></script>
<script src="__STATIC__/js/echarts.common.min.js"></script>
<script>
    //手机适配
    $(function(){
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            $("head").append("<link>");
            var css = $("head").children(":last");
            css.attr({
                rel:  "stylesheet",
                type: "text/css",
                href: "__STATIC__/css/phone_sp.css"
            });
            var mql = window.matchMedia("(orientation: portrait)");
            if(mql.matches) { //竖屏样式
                $(".vnl-zz").show();
                $(".to-fdh").hide();
            }else{
                $(".to-fdh").show();
                $("html").width("100%");
                $("body").width("100%");
            }
            mql.addListener(function(m) {
                if(m.matches) {
                    // 改变到直立方向
                    $(".vnl-zz").show();
                    $(".to-fdh").hide();
                }
                else {
                    $(".to-fdh").show();
                    $(".vnl-zz").hide();
                    $("html").width("100%");
                    $("body").width("100%");
                }
            });
        }
    });
    //导航显示展开
    $(".mob-nrdh").click(function(){
        $(this).next().toggle(".mob-nryc");
    });
    $(".to-imgd").click(function(){
        $(this).next().toggle(".mob-nrlb");
    });
    //手机适配end
    var i = 0;
    var mydata = [];

    /*
     * @param {Object} source_map 字典
     * @param {Object} get_key  纯key值
     * @param {Object} defult_value 默认值
     */
    function _getByDefault(source_map, get_key, defult_value) {
        return source_map[get_key] == null ? defult_value : source_map[get_key]
    }
    $(function() {
        var dateArray = [];
        var myDate = new Date(); //获取今天日期
        myDate.setDate(myDate.getDate() - 7);
        var dateTemp;
        var flag = 1;
        for(var i = 0; i < 8; i++) {
            var Month = (myDate.getMonth() + 1) < 10 ? "0" + (myDate.getMonth() + 1) : (myDate.getMonth() + 1);
            //					console.log(Month);
            var mydate = myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate();
            //					console.log(mydate);
            dateTemp = myDate.getFullYear() + "-" + Month + "-" + mydate;
            dateArray.push(dateTemp);
            myDate.setDate(myDate.getDate() + flag);
        };
        $("#test1").val(dateArray[0]);
        $("#test2").val(dateArray[6]);
        _inquireClick()
    })

    function _inquireClick() {
        var data1 = Date.parse($("#test1").val().replace(/-/g, "/"));
        var data2 = Date.parse($("#test2").val().replace(/-/g, "/"));
        var datadiff = data2 - data1;
        var time = 90 * 24 * 60 * 60 * 1000;
        if(data1 > data2) {

            alert("开始时间应小于结束时间!");
        } else if(datadiff < 0 || datadiff > time) {

            alert("间隔不能大于90天!");
        } else if($("#test1").val() == "") {
            alert("开始时间不能为空!");
        } else if($("#test2").val() == "") {
            alert("结束时间不能为空!");
        } else {
            $.ajax({
                url: '__URL__/datalc',
                data: {
                    "start_date": $("#test1").val(), //开始日期
                    "end_date": $("#test2").val() // 结束日期
                },
                dataType: "json",
                type: "post",
                success: function(results) {
                    console.log(results);
                    $("#table_list_1").jqGrid("clearGridData");
                    var key_list = ['add_user', '1', '3', '5', '7', '15', '30'];
                    $("#table_list_1").jqGrid("clearGridData");
                    for(resp_one_date in results) {
                        one_map = {
                            'datetime': resp_one_date
                        };
                        for(key_index in key_list) {
                            Key = key_list[key_index];
                            one_map[Key] = _getByDefault(results[resp_one_date], Key, "/");
                        }
                        //							for(on_map_key in one_map){
                        //								if (on_map_key != 'add_user' && on_map_key != 'datetime'){
                        //									one_map[on_map_key] = one_map[on_map_key]/one_map['add_user']
                        //									if (isNaN(one_map[on_map_key]) || one_map[on_map_key]==Infinity){
                        //										one_map[on_map_key] = '/'
                        //									}else{
                        //										one_map[on_map_key] = ((one_map[on_map_key]*100).toFixed(2)).toString()+'%'
                        //									}
                        //								}
                        //							}
                        for(on_map_key in one_map) {
                            if(on_map_key != 'add_user' && on_map_key != 'datetime') {
                                var result_percent = one_map[on_map_key] / one_map['add_user']
                                if(!isNaN(result_percent)) {
                                    one_map[on_map_key] = ((result_percent * 100).toFixed(2)).toString() + '%'
                                }
                            }
                        }
                        $("#table_list_1").addRowData(i, one_map, "last");
                        i++;
                    }
                    $("#table_list_1").setGridParam().trigger("reloadGrid");
                },
                error: function(exception, error_message) {
                    console.log(exception.responseText);
                }
            })
        }
    }
    //table
    $(document).ready(function() {
        $.jgrid.defaults.styleUI = 'Bootstrap';
        $("#table_list_1").jqGrid({
            data: mydata,
            datatype: "local",
            height: 500,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [20,50,100],
            colNames: ['日期', '新增', '次日留存', '3日留存', '7日留存', '15日留存', '30日留存'],
            colModel: [{
                name: 'datetime',
                index: 'datetime',
                width: 60,
                sortable: false,
                align:"center"
            },
                {
                    name: 'add_user',
                    index: 'datetime',
                    width: 100,
                    sortable: false,
                    align:"center"
                },
                {
                    name: '1',
                    index: 'datetime',
                    width: 60,
                    sortable: false,
                    align:"center"
                }, {
                    name: '3',
                    index: 'datetime',
                    width: 60,
                    sortable: false,
                    align:"center"
                },
                // {
                // 	name: '5',
                // 	index: 'datetime',
                // 	width: 100,
                // 	sortable: false
                // },
                {
                    name: '7',
                    index: 'datetime',
                    width: 100,
                    sortable: false,
                    align:"center"
                },
                {
                    name: '15',
                    index: 'datetime',
                    width: 60,
                    sortable: false,
                    align:"center"
                }, {
                    name: '30',
                    index: 'datetime',
                    width: 60,
                    sortable: false,
                    align:"center"
                },

            ],
            pager: "#pager_list_1",
            viewrecords: true,
            hidegrid: false,
            loadonce: true,
            gridstate: 'hidden'
        });

        
		setTimeout(function(){
            var width = $('.jqGrid_wrapper').width();
            $('#table_list_1').setGridWidth(width);
		},500);
        
        

        function addCellAttr(rowId, val, rawObject, cm, rdata) {
            if(rawObject.planId == null) {
                return "style='background:#ffc233','color:#fff'";
            }
        }
    });

    laydate.render({
        elem: '#test1',
        //				type: 'datetime'
    });
    laydate.render({
        elem: '#test2',
        //				type: 'datetime'
    });
</script>

</body>

</html>